<template>
	<view class="my-coconut-mine">
		<view class="nav">
			<view class="nav_box" :class="changeIndex==index?'nav_box_active':''" v-for="(item,index) in navList" :key="index" @click="changeNav(index)">
				<text>{{item.value}}</text>
				<view class="nav_line" v-if="changeIndex==index"></view>
			</view>
		</view>
		<view class="list">
			<view class="list_box" v-for="(item,lIndex) in dataList" :key="lIndex" >
				<view class="list_box_c">
					<view class="list_box_c_l">
						<image :src="item.activityImg" mode="aspectFill"></image>
						<view class="list_box_c_l_no">已使用</view>
					</view>
					
					<view class="list_box_c_r">
						<view class="list_box_c_r_title ellipseHide_two">{{item.couponName}}</view>
						<!-- <view class="reward_tips">预计挖取3通分奖励</view> -->
						<view class="list_box_c_r_price" >
							￥<text>138.90</text>
						</view>
					</view>
				</view>
				<view class="reward_tips">
					<text>数字勋章/CoCo到店使用后发放</text>
					<text>幸运奖池未开奖</text>
				</view>
				<view class="list_box_shop">
					<view class="lbs_l">
						<image src="/static/wallet/shop.png" mode="widthFix"></image>
						<text>超值到店</text>
					</view>
					<view class="lbs_line"></view>
					<view class="lbs_r ellipseHide_two">百年谭鸭血重庆老火锅超值双人火锅套餐</view>
				</view>
				<view class="list_box_store" v-if="changeIndex == 0">
					<text>使用门店</text>
					<text>谭鸭血（美兰店）</text>
				</view>
				<view class="list_box_refund" v-if="changeIndex == 1">
					<text>退款金额：￥10.00</text>
					<text>退款手续费：￥3.90</text>
				</view>
				<view class="list_box_time">
					<text>核销时间：2023-06-19 18:30</text>
				</view>
			</view>
			<view class="no_info" v-if="dataList.length==0">
				<image src="/static/my/order_no.png" mode="widthFix"></image>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		couponPlatformList,
	} from '@/api/sy.js'
	export default {
		data() {
			return {
				changeIndex: 0,
				navList:[
					{ id:'1',value:'已使用' },{ id:'2',value:'已退款' }
				],
				status:'2',//状态 shenye_customer_coupon_status 1 待使用 2 已核销 3 已退款 4 已过期
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
				dataList:[], //平台订单列表
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			changeNav(index){ //类型选择
				this.changeIndex = index
				if(index==0){
					this.status = 2
				}else{
					this.status = 3
				}
				this.pageNum = 1
				this.getList()
			},
			async getList() { //获取平台订单列表
				uni.showLoading({ title:'加载中' })
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					status: this.status
				}
				try{
					const res = await couponPlatformList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
					this.dataList.forEach((item)=>{
						item.ruleShow = false
					})
				}
				catch{
					uni.hideLoading()
				}finally{
					setTimeout(res=>{
						uni.hideLoading()
					},4000)
				}
			},
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				console.log('没有分页')
			} else {
				this.pageNum++; //每触底一次 page + 1;
				this.getList()
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F7F9;
	}
	view{
		box-sizing: border-box;
	}
	.my-coconut-mine{
		padding-bottom: 100rpx;
	}
	.nav{
		display: flex;
	}
	.nav_box{
		padding-top: 22rpx;
		height: 88rpx;
		background-color: #fff;
		font-size: 32rpx;
		color: #555555;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% / 2);
	}
	.nav_line{
		width: 60rpx;
		height: 4rpx;
		/* background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%); */
		background-color: #0B87F2;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	.nav_box_active{
		font-size: 32rpx;
		color: #222222;
		font-weight: 600;
	}
	.list {
		padding: 24rpx 30rpx 40rpx 30rpx;
	}
	
	.list_box {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx #E4E4E4;
		border-radius: 20rpx;
		padding: 0 24rpx 30rpx;
		margin-bottom: 30rpx;
	}
	
	.list_box_c {
		display: flex;
		padding: 30rpx 0 26rpx;
	}
	
	.list_box_c_l {
		width: 142rpx;
		height: 142rpx;
		margin-right: 30rpx;
		position: relative;
	}
	.list_box_c_l image{
	   width: 100%;
	   height: 100%;
	   border-radius: 16rpx;
	   opacity: .5;
	}
	.list_box_c_l_no{
		position: absolute;
		z-index: 5;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 108rpx;
		height: 108rpx;
		line-height: 108rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		border-radius: 50%;
		background: rgba(0, 0, 0, .6);
	}
	.list_box_c_r {
		flex: 1;
		/* height: 196rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between; */
	}
	
	.list_box_c_r_title {
		width: 408rpx;
		font-size: 30rpx;
		color: #222222;
		margin-bottom: 10rpx;
		font-weight: bold;
	}
	
	.list_box_c_r_price {
	    color: #FF3A3A;
		font-size: 32rpx;
		font-weight: bold;
	}
	.list_box_c_r_price text{
		font-size: 44rpx;
	}
	
	.reward_tips text{
		display: inline-block;
		color: #E41717;
		padding: 2rpx 8rpx;
		background: #FEEDEE;
		border-radius: 4rpx;
		font-size: 22rpx;
		box-sizing: border-box;
		margin-right: 16rpx;
		
	}
	.list_box_shop{
		display: flex;
		align-items: center;
		width: 100%;
		height: 148rpx;
		background: #F7F9FC;
		border-radius: 8rpx;
		padding: 18rpx 36rpx;
		margin-top: 30rpx;
	
	}
	.lbs_l{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #222222;
		font-size: 22rpx;
	}
	.lbs_l image{
		width: 68rpx;
		height: 72rpx;
	}
	.lbs_line{
		width: 0;
		height: 110rpx;
		border-right: 2rpx solid #DCDCDC;
		margin: 0 30rpx 0 38rpx;
	}
	.lbs_r{
		flex: 1;
		color: #222222;
		font-size: 30rpx;
		line-height: 42rpx;
		font-weight: 600;
	}
	/* end */
	.list_box_store{
		color: #222222;
		font-size: 26rpx;
		margin-top: 30rpx;
		font-weight: 600;
		display: flex;
	}
	.list_box_store text:nth-child(1){
		margin-right: 12rpx;
	}
	.list_box_store text:nth-child(2){
		flex: 1;
	}
	.list_box_refund{
		color: #222222;
		font-size: 26rpx;
		margin-top: 30rpx;
		font-weight: 600;
	}
	.list_box_refund text:nth-child(1){
		margin-right: 100rpx;
	}
	/* end */
	.no_info{
		padding-top: 280rpx;
		padding-bottom: 60rpx;
	}
	.list_box_time{
		color: #555555;
		font-size: 26rpx;
		margin-top: 16rpx;
	}
</style>
